<template>
  <div class="home">
    <div
      style="
        margin: 10px 0 30px 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
      "
    >
      <div>停车场态势</div>
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>停车场管理</el-breadcrumb-item>
          <el-breadcrumb-item>停车场信息</el-breadcrumb-item>
          <el-breadcrumb-item>停车场态势</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div style="display: flex; flex-wrap: wrap; width: 1260px; height: auto">
      <div class="pieChart" :key="v.id" v-for="v in parkingAll">
        <div class="pieChart-header">
          <img src="../assets/images/u3574.png" alt="" />
          <h4 style="padding-left: 10px; color: #707074">
            {{ v.parkingName }}
          </h4>
        </div>
        <div class="pieChart-body">
          <div>
            <div>停车场编号：{{ v.parkingNum }}</div>
            <div>出口：{{ v.outletCount }}</div>
          </div>
          <div style="margin-left: 70px">
            <div>
              停车场类型：{{
                v.parkingType == 0
                  ? "地下停车场"
                  : v.parkingType == 1
                  ? "地面停车场"
                  : "地上停车楼"
              }}
            </div>
            <div>入口：{{ v.entranceCount }}</div>
          </div>
        </div>
        <div class="pieChart-footer">
          <div class="parkingLot">
            <div style="width: 25px; height: 12px; background: #7cb5ec"></div>
            <span>空闲车位</span>
          </div>
          <div class="parkingLot">
            <div style="width: 25px; height: 12px; background: #434348"></div>
            <span>占用车位</span>
          </div>
        </div>
        <div class="pieChart-end">
          <span>车位总数：{{ v.spacesTotal }}</span
          ><br />
          <span>空闲车位：0</span><br />
          <span>占用车位：{{ v.spacesTotal }}</span>
        </div>
        <div class="pie">
          <div class="box">
            <highcharts
              :options="chartOptions"
              style="width: 150px; height: 150px"
            ></highcharts>
          </div>
        </div>
      </div>
      <!-- <div class="pieChart">
        <div class="pieChart-header">
          <img src="../assets/images/u3574.png" alt="" />
          <h4 style="padding-left: 10px;color: #707074;">融城港广场1号停车场</h4>
        </div>
        <div class="pieChart-body">
          <div>
            <div>停车场编号：p1980231331</div>
            <div>出口：4</div>
          </div>
          <div style="margin-left: 70px;">
            <div>停车场类型：地下</div>
            <div>入口：4</div>
          </div>
        </div>
        <div class="pieChart-footer">
          <div class="parkingLot">
            <div style="width: 25px; height: 12px; background: #7cb5ec"></div>
            <span>空闲车位</span>
          </div>
          <div class="parkingLot">
            <div style="width: 25px; height: 12px; background: #434348"></div>
            <span>占用车位</span>
          </div>
        </div>
        <div class="pieChart-end">
          <span>车位总数：1000</span><br>
          <span>空闲车位：0</span><br>
          <span>占用车位：1000</span>
        </div>
        <div class="pie">
          <div class="box">
            <highcharts
              :options="chartOptions"
              style="width: 150px; height: 150px"
            ></highcharts>
          </div>
        </div>
      </div> -->
    </div>
  </div>
</template>

<script>
// import HighchartsVue from "highcharts-vue";
import { Chart } from "highcharts-vue";

export default {
  data: function () {
    return {
      parkingAll: [],
      chartOptions: {
        credits: { enabled: false },
          chart: {
            type: "pie",
          },
          title: {
            text: undefined,
          },
          plotOptions: {
            pie: {
              allowPointSelect: true,
              cursor: "pointer",
              dataLabels: {
                enabled: false,
              },
              // showInLegend: true,//饼状图下面的实例开关
            },
          },
          series: [
            {
              name: "所占比例",
              colorByPoint: true,
              roseType: "area",
              data: [
                {
                  name: "空闲车位",
                  y: 35,
                  sliced: true,
                  selected: true,
                  itemStyle: { color: "#909399" },
                },
                {
                  name: "占用车位",
                  y: 65,
                  itemStyle: { color: "#0bb197" },
                },
              ],
            },
          ],
      },
    };
  },
  components: {
    highcharts: Chart,
  },
  mounted: function () {
    //发送请求  得到数据;
    //得到的数据赋值

    // setTimeout(() => {
    //   this.parkingAll.forEach((v, i) => {
    //     // console.log('测试',v)
    //     let options = {
    //       credits: { enabled: false },
    //       chart: {
    //         type: "pie",
    //       },
    //       title: {
    //         text: undefined,
    //       },
    //       plotOptions: {
    //         pie: {
    //           allowPointSelect: true,
    //           cursor: "pointer",
    //           dataLabels: {
    //             enabled: false,
    //           },
    //           // showInLegend: true,//饼状图下面的实例开关
    //         },
    //       },
    //       series: [
    //         {
    //           name: "所占比例",
    //           colorByPoint: true,
    //           roseType: "area",
    //           data: [
    //             {
    //               name: "空闲车位",
    //               y: v.spacesTotal,
    //               sliced: true,
    //               selected: true,
    //               itemStyle: { color: "#909399" },
    //             },
    //             {
    //               name: "占用车位",
    //               y: 65,
    //               itemStyle: { color: "#0bb197" },
    //             },
    //           ],
    //         },
    //       ],
    //     };
    //     // options.series[0].data = [
    //     //   {
    //     //     name: "空闲车位",
    //     //     y: v.spacesTotal,
    //     //     sliced: true,
    //     //     selected: true,
    //     //     itemStyle: { color: "#909399" },
    //     //   },
    //     //   {
    //     //     name: "占用车位",
    //     //     y: 0,
    //     //     itemStyle: { color: "#0bb197" },
    //     //   },
    //     // ];
    //     this.chartOptions.push(options);
    //   });
    // }, 500);
    // console.log(this.chartOptions);

    //获取所有停车场

    this.$axios({
      url: "/smart/parking/list",
      method: "POST",
      params: {
        pageNum: 1,
        pageSize: 10000,
      },
      data: {
        parkingNum: "",
        parkingName: "",
        parkingType: "",
      },
    }).then(({ data }) => {
      console.log("所有停车场", data);
      if (data.code == "00000") {
        this.parkingAll = data.data.list;
        // console.log("挂载后测试", this.parkingAll);
      } else {
        this.$message.error("停车场加载失败！");
      }
    });
  },
};
</script>
<style lang="less" scoped>
.home {
  height: 95%;
  margin: 20px 20px 0 20px;
}
.pieChart {
  width: 580px;
  height: 350px;
  background: #fff;
  margin-right: 50px;
  margin-bottom: 20px;
  position: relative;
}
.box {
  position: absolute;
  bottom: 20px;
  left: 100px;
}
.pieChart-header {
  width: auto;
  display: flex;
  position: absolute;
  top: 30px;
  left: 20px;
}
.pie {
  background: white;
  width: 150px;
  height: 150px;
  margin-right: 50px;
}
.pieChart-body {
  width: 100%;
  display: flex;
  // justify-content: space-around;
  position: absolute;
  top: 90px;
  left: 20px;
  font-size: 13px;
  color: #707074;
  // margin-left: -30px;
}
span {
  font-size: 13px;
  color: #707074;
}
.pieChart-footer {
  display: flex;
  position: absolute;
  top: 150px;
  left: 40px;
}
.parkingLot {
  display: flex;
  align-items: center;
  margin-right: 10px;
}
.pieChart-end {
  position: absolute;
  bottom: 90px;
  right: 110px;
}
</style>
